import React, { Component } from 'react';
import VideoPlugin from '@/components/plugins/videoplugin/videoplugin';
import ReactDOM from 'react-dom';
function sweet(options) {
  let container = document.createElement('div');
  ReactDOM.render(
    <VideoForm callback={options.callback} />
    , container
  )
}
class VideoForm extends Component {
  state = {
    isLoading: false,
  }
  componentDidMount() {
    this.OpenVideoModal();
  }
  videoModal = (ref) => {
    this.videomodal = ref;
  }
  onChangeLoading = () => {
    this.setState({
      isLoading: false
    });
  }
  OpenVideoModal = () => {
    this.setState({
      isLoading: true
    }, () => {
      this.videomodal.showModal();
    });
  };
  onVideoChange = (item) => {
    const { callback } = this.props;
    let cdnUrl = window.cdnUrl;

    let _videoName = item.DisplayName;
    let _videoUrl = cdnUrl+'/' + item.Path;
    let _imgUrl;
    if (item.Img.length > 0) {
      _imgUrl = cdnUrl + item.Img;
    } else {
      _imgUrl = '';
    }

    let videoInfo = {
      videoImg: _imgUrl,
      videoName: _videoName,
      videoUrl: _videoUrl
    };
    videoInfo.html = `<p class="xkd-richtext-video"><video src="${videoInfo.videoUrl}" poster="${videoInfo.videoImg}" controls="" width="100%" > 正在加载</video></p>`
    callback(videoInfo)
    //this.props.onChange({ videourl: _videoUrl });
    this.videomodal.handleCancel();
  };
  render() {
    return (
      <VideoPlugin onRef={this.videoModal} onIsLoading={this.onChangeLoading} selectvideo={this.onVideoChange} ></VideoPlugin>
    );
  }
}



export default function (options) {
  sweet(options);
}
